<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=FPTNyn1QvwkNGaX86RGSDAjL"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
    <script type="text/javascript" src="../js/range-data.js"></script>
	<script type="text/javascript" src="../js/zone-data.js"></script>
	<script src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js" type="text/javascript"></script> 
   <title>热力图功能示例</title>
    <style type="text/css">
		ul,li{list-style: none;margin:0;padding:0;float:left;}
		html{height:100%}
		body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";}
		#container{height:500px;width:100%;}
		#r-result{width:100%;}
    </style>	
</head>
<body>
	<div id="container"></div>
</body>
</html>
<script type="text/javascript">
    var map = new BMap.Map("container");          // 创建地图实例

    var point = new BMap.Point(118.301624,31.355314);
    map.centerAndZoom(point, 12);             // 初始化地图，设置中心点坐标和地图级别
  	map.enableScrollWheelZoom(); //允许滚轮缩放
    map.enableKeyboard();
    map.disableDoubleClickZoom();
    map.setMinZoom(11);
    map.setMaxZoom(14); 
    var b = new BMap.Bounds(new BMap.Point(116.941374 , 30.529586),new BMap.Point(119.198492 , 31.777557));  //设置边界   
    try {   
        BMapLib.AreaRestriction.setBounds(map, b); // 已map为中心，已b为范围的地图
    } catch (e) {
        // 捕获错误异常
        alert(e);
    }     
    var points =[
    {"lng":117.55857,"lat":31.052957,"count":50},
    {"lng":117.683255,"lat":31.031624,"count":51},
    {"lng":117.572854,"lat":31.126377,"count":15},
    {"lng":117.661352,"lat":31.126388,"count":40},
    {"lng":117.628213,"lat":31.185046,"count":100},
    {"lng":117.699979,"lat":31.202028,"count":6},
    {"lng":117.817341,"lat":31.150578,"count":18},
    {"lng":117.740228,"lat":31.300207,"count":80},
    {"lng":117.805028,"lat":31.200685,"count":11},
    {"lng":118.414599,"lat":31.473815,"count":7},
    {"lng":118.318571,"lat":31.44441,"count":42},
    {"lng":118.367011,"lat":31.437428,"count":4},
    {"lng":118.311457,"lat":31.417943,"count":27},
    {"lng":118.419812,"lat":31.420836,"count":23},
    {"lng":118.420682,"lat":31.41463,"count":60},
    {"lng":118.415424,"lat":31.424675,"count":8},
    {"lng":118.414242,"lat":31.414509,"count":15},
    {"lng":118.422766,"lat":31.421408,"count":25},
    {"lng":118.421674,"lat":31.424316,"count":21},
    {"lng":118.427268,"lat":31.42267,"count":1},
    {"lng":118.417721,"lat":31.420034,"count":51},
    {"lng":118.412456,"lat":31.42667,"count":7},
    {"lng":118.420432,"lat":31.414114,"count":11},
    {"lng":118.425013,"lat":31.421611,"count":35},
    {"lng":118.418733,"lat":31.931037,"count":22},
    {"lng":118.419336,"lat":31.931134,"count":4},
    {"lng":118.413557,"lat":31.423254,"count":5},
    {"lng":118.418367,"lat":31.42943,"count":3},
    {"lng":118.424312,"lat":31.419621,"count":100},
    {"lng":118.423874,"lat":31.419447,"count":87},
    {"lng":118.424225,"lat":31.423041,"count":32},
    {"lng":118.417801,"lat":31.421854,"count":44},
    {"lng":118.417129,"lat":31.428227,"count":21},
    {"lng":118.426426,"lat":31.422286,"count":80},
    {"lng":118.421597,"lat":31.41948,"count":32},
    {"lng":118.423895,"lat":31.420787,"count":26},
    {"lng":118.423563,"lat":31.421197,"count":17},
    {"lng":118.417982,"lat":31.422547,"count":17},
    {"lng":118.426126,"lat":31.421938,"count":25},
    {"lng":118.42326,"lat":31.415782,"count":100},
    {"lng":118.414231,"lat":31.416759,"count":31},
    {"lng":118.417185,"lat":31.424123,"count":11},
    {"lng":118.417237,"lat":31.427518,"count":9},
    {"lng":118.417784,"lat":31.415754,"count":47},
    {"lng":118.420193,"lat":31.417061,"count":52},
    {"lng":118.422735,"lat":31.415619,"count":100},
    {"lng":118.418495,"lat":31.415958,"count":46},
    {"lng":118.416242,"lat":31.931166,"count":9},
    {"lng":118.419416,"lat":31.424055,"count":8},
    {"lng":118.42189,"lat":31.421308,"count":11},
    {"lng":118.413765,"lat":31.429376,"count":3},
    {"lng":118.418232,"lat":31.420348,"count":50},
    {"lng":118.417554,"lat":31.930511,"count":15},
    {"lng":118.418568,"lat":31.418161,"count":23},
    {"lng":118.413461,"lat":31.426306,"count":3},
    {"lng":118.42232,"lat":31.42161,"count":13},
    {"lng":118.4174,"lat":31.428616,"count":6},
    {"lng":118.424679,"lat":31.415499,"count":21},
    {"lng":118.42171,"lat":31.415738,"count":29},
    {"lng":118.417836,"lat":31.416998,"count":99},
    {"lng":118.420755,"lat":31.428001,"count":10},
    {"lng":118.414077,"lat":31.930655,"count":14},
    {"lng":118.426042,"lat":31.422995,"count":16},
    {"lng":118.41535,"lat":31.931054,"count":15},
    {"lng":118.413022,"lat":31.421895,"count":13},
    {"lng":118.415551,"lat":31.413373,"count":17},
    {"lng":118.421141,"lat":31.426572,"count":1},
    {"lng":118.419612,"lat":31.417119,"count":9},
    {"lng":118.418237,"lat":31.421337,"count":54},
    {"lng":118.423776,"lat":31.421419,"count":26},
    {"lng":118.417694,"lat":31.42536,"count":17},
    {"lng":118.415377,"lat":31.414137,"count":19},
    {"lng":118.417434,"lat":31.414314,"count":43},
    {"lng":118.42588,"lat":31.422622,"count":27},
    {"lng":118.418345,"lat":31.419467,"count":8},
    {"lng":118.426883,"lat":31.417171,"count":3},
    {"lng":118.423877,"lat":31.416659,"count":34},
    {"lng":118.415712,"lat":31.415613,"count":14},
    {"lng":118.419869,"lat":31.931416,"count":12},
    {"lng":118.416956,"lat":31.425377,"count":11},
    {"lng":118.42066,"lat":31.425017,"count":38},
    {"lng":118.416244,"lat":31.420215,"count":41},
    {"lng":118.41429,"lat":31.415908,"count":54},
    {"lng":118.422116,"lat":31.419658,"count":21},
    {"lng":118.4183,"lat":31.425015,"count":15},
    {"lng":118.421969,"lat":31.413527,"count":3},
    {"lng":118.422936,"lat":31.421854,"count":24},
    {"lng":118.41905,"lat":31.424217,"count":12},
    {"lng":118.424579,"lat":31.414987,"count":57},
    {"lng":118.42076,"lat":31.415251,"count":70},
    {"lng":118.425867,"lat":31.418989,"count":8}];
   
    if(!isSupportCanvas()){
    	alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
    }
	//详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md
	//参数说明如下:
	/* visible 热力图是否显示,默认为true
     * opacity 热力的透明度,1-100
     * radius 势力图的每个点的半径大小   
     * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
     *	{
			.2:'rgb(0, 255, 255)',
			.5:'rgb(0, 110, 255)',
			.8:'rgb(100, 0, 255)'
		}
		其中 key 表示插值的位置, 0~1. 
		    value 为颜色值. 
     */
	heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});
	map.addOverlay(heatmapOverlay);
	heatmapOverlay.setDataSet({data:points,max:100});
	/*//是否显示热力图
    function openHeatmap(){*/
    heatmapOverlay.show();
   	map.setMapStyle({style:'midnight'});
  /*  }
	function closeHeatmap(){
        heatmapOverlay.hide();
    }*/
	closeHeatmap();
    function setGradient(){
     	/*格式如下所示:
		{
	  		0:'rgb(102, 255, 0)',
	 	 	.5:'rgb(255, 170, 0)',
		  	1:'rgb(255, 0, 0)'
		}*/
     	var gradient = {};
     	var colors = document.querySelectorAll("input[type='color']");
     	colors = [].slice.call(colors,0);
     	colors.forEach(function(ele){
			gradient[ele.getAttribute("data-key")] = ele.value; 
     	});
        heatmapOverlay.setOptions({"gradient":gradient});
    }
	//判断浏览区是否支持canvas
    function isSupportCanvas(){
        var elem = document.createElement('canvas');
        return !!(elem.getContext && elem.getContext('2d'));
    }
</script>